/**
 * 存放message函数
 * $message 返回一个promise，并且会调用打开组件
 */
import Vue from "vue";
import MessageComponents from "./main.vue";

const Message = function (content, title, options) {
    return new Promise((resolve, reject) => {
        // 打开组件，Vue.extend会把vue的组件当做是一个构造函数返回，通过构造函数调用组件
        const MessageConstructor = Vue.extend(MessageComponents);
        // 构造组件实例，但是该实例时不知道你要把我渲染在哪个位置，
        // 注意普通的组件是没有el属性，根实例才会有，所以需要指定
        const instance = new MessageConstructor({
            el: document.createElement("div"),
            data() {
                return {
                    content,
                    title,
                    options,

                    // 把确定和取消按钮的函数传给组件
                    resolve,
                    reject
                }
            }
        });
        // 当前组件可以添加到body
        document.body.appendChild(instance.$el);
    })

};

export default Message;